<template>
  <div>
    <ButtonGroup
      v-if="!isEdit"
      :options="clueButtons"
      style="margin-bottom: 20px"
      @click="handleButtonClick"
    />
    <p-table
      class="table-list-container"
      row-key="id"
      :columns="columns"
      :pagination="false"
      bordered
      :data-source="selectMy"
      :loading="load"
      :scroll="{ y: 350 }"
      :row-selection="rowSelectionMixin"
      @change="handleTableChange"
    >
      <a slot="modelNumber" slot-scope="text" @click="handleNumberClick(text)">
        {{ text }}
      </a>
    </p-table>
    <!-- <DialogVisitBusinessList
      :visible.sync="visibleVisit"
      @change="changeVisit"
    /> -->
  </div>
</template>

<script>
import mixinTable from '@/mixins/mixin-table.js';

export default {
  components: {},
  mixins: [mixinTable],
  props: {
    selectMy: {
      type: Array,
      default: () => [],
    },
    myKeys: {
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    load: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleVisit: false,
    };
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'opportunityNo' },
        },
        {
          align: 'center',
          title: '手机号码',
          dataIndex: 'tel',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '邮箱',
          dataIndex: 'email',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'department',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '职位',
          dataIndex: 'position',
          ellipsis: true,
        },
      ];
      return columns;
    },
    clueButtons() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'myAdd',
          type: 'primary',
          label: '关联成员',
          icon: 'plus',
          authKey: '',
        },
        {
          key: 'myDelete',
          label: '删除',
          icon: 'delete',
          authKey: '',
          disabled,
        },
      ];
    },
  },
  methods: {
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    myAddCallback() {
      this.$emit('add-my');
    },
    myDeleteCallback() {
      const ids = this.rowSelectionMixin.selectedRowKeys;
      this.$confirm(`该操作将删除 ${ids.length} 条数据，是否确认？`)
        .then(() => {
          this.$emit('delete-my', ids);
          this.rowSelectionMixin.selectedRowKeys = [];
        })
        .catch(() => {
          // console.log('e: ', e);
        });
    },
  },
};
</script>
